/*
  学习目标：useEffect挂载和卸载的综合写法

*/
import React, { useEffect, useState } from "react";

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log("窗口改变了  ----->  ");
  };

  // 👍 一个 useEffect 只处理一个功能，有多个功能时，使用多次 useEffect
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log("定时器在跑  ----->  ");
    }, 500);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  useEffect(() => {
    window.addEventListener("resize", resizeFn);

    return () => {
      window.removeEventListener("resize", resizeFn);
    };
  }, []);

  return <div>我是子组件</div>;
}
